<template>
    <div>
        <div class="lwy-back">
            <router-link to="/happyhome/leisure/keepinglive"><i class="el-icon-arrow-left"></i>返回首页</router-link>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-input v-model="formInline.user" placeholder="请输入"></el-input>

            <el-form-item>
                <el-button class="el-button--primary" type="primary" @click="onSubmit">查询</el-button>
                <el-button class="el-button--primary" type="primary" @click="onReset">重置</el-button>
                <el-button class="el-button--primary" type="primary" @click="addDialog = true">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border style="width:100%">

            <el-table-column align="center" prop="name" label="姓名">
            </el-table-column>
            <el-table-column align="center" prop="time" label="分钟" sortable>
            </el-table-column>
            <el-table-column align="center" prop="wuyang" label="无氧运动">
            </el-table-column>
            <el-table-column align="center" prop="youyang" label="有氧运动">
            </el-table-column>
            <el-table-column align="center" prop="rest" label="备注">
            </el-table-column>
            <el-table-column align="center" prop="tim" label="日期" sortable>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button  @click="handleClick(scope.row)" type="text" class="button" size="small">修改</el-button>

                    <template>
                        <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(scope.row)">
                            <el-button class="button" type="text" size="small" slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[5, 8, 10]" layout="total, sizes, prev, pager, next, jumper"
                :total="totalData.length">
            </el-pagination>
        </div>

        <el-dialog title="添加" :visible.sync="addDialog" style="width:100%">
            <el-form :model="addData">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="addData.tim" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="addData.rest" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="addData.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="无氧运动" :label-width="formLabelWidth" aria-placeholder="">
                    <el-select style="width:200px" v-model="addData.wuyang" multiple placeholder="请选择">
                        <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="有氧运动" :label-width="formLabelWidth">
                    <el-select style="width:200px" v-model="addData.youyang" multiple placeholder="请选择">
                        <el-option v-for="item in aerobi" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="分钟" :label-width="formLabelWidth">
                    <el-input v-model="addData.time" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialog = false">取 消</el-button>
                <el-button type="primary" @click="onAdd">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="editDialog" style="width:100%">
            <el-form :model="editData">
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="editData.tim" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="无氧运动" :label-width="formLabelWidth" aria-placeholder="">
                    <el-select style="width:200px" v-model="editData.wuyang" multiple placeholder="请选择">
                        <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="有氧运动" :label-width="formLabelWidth">
                    <el-select style="width:200px" v-model="editData.youyang" multiple placeholder="请选择">
                        <el-option v-for="item in aerobi" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="editData.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分钟" :label-width="formLabelWidth">
                    <el-input v-model="editData.time" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input v-model="editData.rest" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialog = false">取 消</el-button>
                <el-button type="primary" @click="onEdit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';
export default {

    data() {
        return {
            disabledDate(time) {
                return time.getTime() > Date.now();
            },
            page: 1,
            count: 5,
            formLabelWidth: "100px",
            addDialog: false,
            editDialog: false,
            currentPage4: 1,
            editData: {
                tim: '',
            },
            addData: {},
            totalData: [],
            formInline: {
                search: "",
            },
            tableData: [],
            options: [{
                label: '短跑'
            }, {

                label: '平板支撑'
            }, {

                label: '下蹲'
            }, {

                label: '俯卧撑'
            },
            {

                label: '拳击'
            }, {

                label: '仰卧起坐'
            }

            ],
            //有氧
            aerobi: [
                {
                    label: '瑜伽'
                }, {

                    label: '步行'
                }, {

                    label: '游泳'
                }, {

                    label: '健身操'
                },
                {
                    label: '跳绳'
                }, {

                    label: '跑步'
                }, {

                    label: '阶梯机'
                }, {

                    label: '太极'
                }, {

                    label: '养生操'
                }, {

                    label: '跳舞'
                },
            ],
            value1: [],


        }
    },
    methods: {
        handleSizeChange(val) {
            this.count = val
            this.tableData = this.totalData.slice(0, this.count)
        },
        handleCurrentChange(val) {
            this.tableData = this.totalData.slice((val - 1) * this.count, val * this.count);
        },
        // 渲染
        render() {
            axios({
                url: '/dbdata/keeweight',
            }).then(({ data }) => {
                // console.log(data);
                // this.tableData = data
                this.totalData = data
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count)

            });
        },
        handleClick(v) {
            this.editDialog = true;
            this.editData = {
                id: v.id,
                name: v.name,
                time: v.time,
                age: v.age,
                wuyang: v.wuyang,
                youyang: v.youyang,
                rest: v.rest
            };
        },
        onEdit() {
            let id = this.editData.id
            axios({
                url: `/dbdata/keeweight/${id}`,
                method: "patch",
                data: this.editData,
            }).then((res) => {
                this.editDialog = false;
                //   this.editData = res.editData
                this.$message.success("修改成功");
                this.render();
            })
        },

        // 添加
        onAdd() {
            axios({
                url: '/dbdata/keeweight',
                method: 'post',
                data: this.addData,
            }).then((data) => {
                // console.log(res);
                this.addDialog = false;
                this.tableData = data
                this.$message.success('添加成功')
            })
            this.render()
        },
        // 删除
        del(row) {
            let id = row.id
            axios({
                url: `/dbdata/keeweight/${id}`,
                method: 'delete',
            }).then((data) => {
                this.totalData = data;
                if (Math.ceil((this.tableData.length - 1) / this.count) < this.currentPage4) {
                    this.currentPage4--
                }
                this.$message.success("删除成功");
                this.render();

            })
            this.render();

        },
        onSubmit() {
            axios({
                url: '/dbdata/keeweight?q=' + this.formInline.user,
            }).then(({ data }) => {
                this.totalData = data;
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);
                this.formInline.user = '';

            })
            console.log('submit!');
        },
        //
        onReset() {
            this.page = 1;
            this.formInline.user = ''
            this.render();

        },
        render() {
            axios({
                url: '/dbdata/keeweight/'
            }).then(({ data }) => {
                this.totalData = data;
                this.tableData = this.totalData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);

            })
        },
        checkBut(v) {
            this.$router.push({ path: '/happyhome/leisure/keeshi', query: { data: this.totalData } })
        }
    },

    mounted() {
        this.render();
    },



}
</script>
<style lang="less" scoped>
.el-option {
    width: 200px;
}

.block {
    margin-left: 600px !important;
}

.el-input {
    width: 200px !important;
    margin-right: 10px;
}

.el-form-item {
    margin-right: 550px !important;
}

.el-input {
    width: 200px;
}

.lwy-back {
    text-align: left;
    margin-left: 5px;
    margin-top: 20px;

    a:-webkit-any-link {
        color: rgba(00, 00, 00, 0.67);
        text-decoration: none;

        .el-icon-arrow-left {
            margin-right: 5px;
        }
    }

}

.button {
    width: 50px;
}

.el-button--primary {
    background-color: rgb(255, 233, 192);
    color: rgba(00, 00, 00, 0.8);
    border-color: rgb(255, 233, 192);
}

.el-button--primary:hover {
    background-color: rgba(255, 233, 192, 0.8);
    color: rgba(00, 00, 00, 0.5);
    
}
</style>